<template>
  <div class="search-container">
    <el-form :inline="true">
      <el-form-item
        v-for="(item, index) in searchFormArrF"
        :key="index"
        :label="item.type == 'checkbox' ? '' : item.fieldName"
        :style="formItemStyle(item)"
      >
        <!-- ipnut -->
        <el-input
          v-if="item.type == 'input'"
          v-model.trim="fieldArr[item.field]"
          :type="item.NameType"
          :placeholder="item.placeholder"
          style="width: 300px"
          @keyup.native="handleKeyUp"
        />
        <div
          v-else-if="item.type === 'inputRange'"
          class="line"
        >
          <el-input
            v-model.trim="fieldArr[item.field][0]"
            :type="item.NameType"
            :placeholder="item.placeholder"
            style="width: 150px"
            @keyup.native="handleKeyUp"
          />
          -
          <el-input
            v-model.trim="fieldArr[item.field][1]"
            :type="item.NameType"
            :placeholder="item.placeholder"
            style="width: 150px"
            @keyup.native="handleKeyUp"
          />
        </div>
        <el-input
          v-else-if="item.type == 'inputSearch'"
          v-model.trim="fieldArr[item.field]"
          :placeholder="item.placeholder"
          :type="item.NameType"
          style="width: 350px"
          class="input-with-select"
          @keyup.native="handleKeyUp"
        >
          <el-button
            slot="append"
            type="primary"
            @click="submitForm()"
          >
            <i
              class="el-icon-search"
              style="margin-right: 5px"
            />
            查询
          </el-button>
        </el-input>
        <!-- select -->
        <el-select
          v-else-if="item.type == 'select'"
          v-model="fieldArr[item.field]"
          :placeholder="item.placeholder"
          :clearable="item.clearable === false ? false : true"
          :multiple="item.multiple || false"
          :filterable="item.filterable || false"
          collapse-tags
          :style="`width: ${item.width}px` || 'width: 150px;'"
          @change="selectChange(item)"
        >
          <el-option
            v-for="(itemOption, index1) in item.option"
            :key="index1"
            :label="itemOption.label"
            :value="itemOption.value"
          />
        </el-select>
        <!--任意时间范围-->
        <el-date-picker
          v-else-if="item.type == 'timePicker'"
          v-model="fieldArr[item.field]"
          :type="item.timeType || 'datetimerange'"
          :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          style="width: 300px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timePicker"
        />
        <!-- 级联选择器 -->
        <el-cascader
          v-else-if="item.type == 'cascader'"
          v-model="fieldArr[item.field]"
          clearable
          :options="item.option"
          collapse-tags
          :props="item.props"
          @change="submitForm('cascader', $event, item.props)"
          @click.native="handleCascaderClick"
        />
        <!-- 多选框 -->
        <el-checkbox
          v-else-if="item.type == 'checkbox'"
          v-model="fieldArr[item.field]"
          @change="submitForm"
        >
          {{ item.fieldName }}
        </el-checkbox>
        <!-- 单选框组 -->
        <el-radio-group
          v-else-if="item.type == 'radioGroup'"
          v-model="fieldArr[item.field]"
          @change="submitForm"
        >
          <el-radio
            v-for="itemOption in item.option"
            :key="itemOption.value"
            :label="itemOption.value"
          >
            {{ itemOption.label }}
          </el-radio>
        </el-radio-group>
        <!-- 多选框组 -->
        <el-checkbox-group
          v-else-if="item.type == 'checkboxGroup'"
          v-model="fieldArr[item.field]"
          @change="submitForm"
        >
          <el-checkbox
            v-for="itemOption in item.option"
            :key="itemOption.value"
            :label="itemOption.value"
          >
            {{ itemOption.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="el-noColor"
          @click="submitForm"
        >
          查询
        </el-button>
        <el-button
          class="el-noColor"
          @click="resetForm"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    searchFormArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fieldArr: {},
      cascaderItem: null
    }
  },
  computed: {
    searchFormArrF() {
      if (!this.searchFormArr) {
        return []
      }
      return this.searchFormArr.filter((item) => item.hidden !== true)
    }
  },
  created() {
    this.setDefault()
  },
  methods: {
    formItemStyle(item) {
      const style = {}
      if (item.width) {
        style.width = item.width
      }
      return style
    },
    // 表单默认值
    setDefault() {
      this.searchFormArr.forEach((item) => {
        if (item.default !== undefined) {
          if (Array.isArray(item.default)) {
            this.$set(this.fieldArr, item.field, [...item.default])
          } else {
            this.$set(this.fieldArr, item.field, item.default)
          }
        } else {
          this.$set(this.fieldArr, item.field, '')
        }
      })
    },
    // 搜索按钮
    submitForm(type, value, props) {
      if (
        type === 'cascader' &&
        value.length > 0 &&
        props.multiple !== 'true'
      ) {
        this.cascaderItem.click()
      }
      this.$emit('searchParma', this.fieldArr)
    },
    handleCascaderClick(e) {
      this.cascaderItem = e.target
    },
    // 重置
    resetForm() {
      this.setDefault()
      this.$emit('resetForm')
      this.$emit('searchParma', this.fieldArr)
    },
    // 下拉选框
    selectChange(item) {
      this.$emit('change', { item, fieldArr: this.fieldArr })
      this.$emit('searchParma', this.fieldArr)
    },
    // 级联选择
    handleCascaderChange(item) {
      this.$emit('change', item, this.fieldArr)
      this.$emit('searchParma', this.fieldArr)
    },
    // 时间范围
    timePicker() {
      this.$emit('searchParma', this.fieldArr)
    },
    // 关闭弹窗清除表单
    resetFormClose() {
      this.fieldArr = {}
    },
    // 清除某项数据
    clearFormItem(key, defaultData) {
      if (defaultData || defaultData === 0) {
        this.fieldArr[key] = defaultData
      } else {
        this.fieldArr[key] = ''
      }
      this.$emit('searchParma', this.fieldArr)
    },
    setItemValue(list, search = true) {
      list.forEach((item) => {
        this.fieldArr[item.key] = item.value
      })
      if (search) {
        // 触发搜索
        this.$emit('searchParma', this.fieldArr)
      }
    },
    // 按回车键搜索
    handleKeyUp(event) {
      if (event.keyCode === 13) {
        this.submitForm()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form.el-form--inline {
  margin-top: -10px;
}
::v-deep .el-input-group__append {
  color: #fff;
  background-color: #5db42c;
  border-color: #5db42c;
}
::v-deep .el-form--inline .el-form-item {
  margin: 10px 30px 0 0;
}
::v-deep .el-checkbox-group {
  height: 28px !important;
}
</style>
